<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 24 24"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><g clip-path="url(#e52cf__a)"><path data-follow-fill="currentColor" d="M24 3.6c0-.919-.84-1.734-2.373-2.291C20.28.817 18.493.545 16.613.545c-1.88 0-3.666.272-5.013.764-1.547.557-2.387 1.372-2.387 2.291v4.388c-.586-.052-1.2-.091-1.826-.091-1.88 0-3.667.272-5.014.764C.84 9.23 0 10.046 0 10.964V20.4c0 .919.84 1.734 2.373 2.29 1.347.493 3.134.764 5.014.764 1.88 0 3.666-.271 5.013-.763 1.333-.492 2.147-1.165 2.333-1.942.614.065 1.24.091 1.867.091 1.88 0 3.667-.272 5.013-.764 1.534-.556 2.374-1.372 2.374-2.29v-.078L24 3.6Zm-1.187 10.678c0 .79-2.426 1.915-6.213 1.915-.627 0-1.24-.025-1.827-.09v-2.356c.6.065 1.2.09 1.827.09 1.88 0 3.667-.27 5.013-.763a6.365 6.365 0 0 0 1.2-.57v1.774Zm-9.213-.026c0 .79-2.427 1.916-6.213 1.916-3.787 0-6.214-1.14-6.214-1.916v-1.566c.334.207.734.401 1.2.57 1.347.491 3.134.763 5.014.763 1.88 0 3.666-.272 5.013-.764a6.365 6.365 0 0 0 1.2-.57v1.567ZM1.173 15.973a6.4 6.4 0 0 0 1.2.57c1.347.492 3.134.764 5.014.764 1.88 0 3.666-.272 5.013-.764a6.37 6.37 0 0 0 1.2-.57v1.36c0 .789-2.427 1.915-6.213 1.915-3.787 0-6.214-1.139-6.214-1.916v-1.359Zm21.64-5.19c0 .79-2.426 1.916-6.213 1.916-.627 0-1.24-.026-1.827-.09v-1.645c0-.245-.066-.491-.186-.724.653.064 1.32.103 2.013.103 1.88 0 3.667-.272 5.013-.763a6.369 6.369 0 0 0 1.2-.57v1.773Zm0-3.507c0 .79-2.426 1.915-6.213 1.915s-6.213-1.139-6.213-1.915V5.32a6.34 6.34 0 0 0 1.2.57c1.346.492 3.133.763 5.013.763s3.667-.271 5.013-.763a6.368 6.368 0 0 0 1.2-.57v1.955ZM16.6 1.67c3.787 0 6.213 1.14 6.213 1.916 0 .777-2.413 1.929-6.213 1.929-3.787 0-6.213-1.14-6.213-1.916 0-.777 2.426-1.929 6.213-1.929ZM7.387 9.036c.84 0 1.6.052 2.293.155.027 0 .04.013.067.013 2.4.337 3.853 1.152 3.853 1.76 0 .79-2.427 1.916-6.213 1.916-3.787 0-6.214-1.139-6.214-1.916 0-.776 2.414-1.928 6.214-1.928Zm0 13.292c-3.787 0-6.214-1.139-6.214-1.915v-1.359c.334.207.734.401 1.2.57 1.347.491 3.134.763 5.014.763 1.88 0 3.666-.272 5.013-.764a6.37 6.37 0 0 0 1.2-.57v1.36c0 .776-2.427 1.915-6.213 1.915Zm9.213-2.627c-.627 0-1.24-.026-1.827-.09v-2.356c.6.065 1.2.09 1.827.09 1.88 0 3.667-.271 5.013-.763a6.37 6.37 0 0 0 1.2-.57v1.786c0 .764-2.413 1.903-6.213 1.903Z" :fill="_fill"/></g><defs><clipPath id="e52cf__a"><path d="M0 0h24v24H0z" fill="#fff"/></clipPath></defs></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Fisma extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
